<template>
  <div id="manager">
    <div v-show="au">
      <el-empty image="https://yangxiong001.oss-cn-hangzhou.aliyuncs.com/photo/%E6%9A%82%E6%97%A0%E6%9D%83%E9%99%90.png"
                :image-size="300" description=" ">
        <div style="color: orangered; font-size: 24px; font-family: 微软雅黑">暂无权限</div>
      </el-empty>
    </div>
    <div v-show="managerList.length!==0">
      <div>
        <el-button type="primary" @click="add" size="medium" class="btn">新增</el-button>
      </div>
      <el-table :data="managerList" style="width: 100%; margin-top: 20px" height="710"
                :header-cell-style="{background:'#dde2e2', fontFamily:'Helvetica',fontSize:'14px'}">
        <el-table-column fixed prop="avatar" label="头像">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="birthday" label="生日"></el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" size="small" type="primary" @click="getManager(scope.row)">详 情
            </el-button>
            <el-button icon="el-icon-delete" size="small" type="danger" @click="deleteManager(scope.row)">删 除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="详情信息" :close-on-press-escape="false" :close-on-click-modal="false" :visible.sync="show"
                 width="30%" @close="show = false" v-model="currentManager">
        <el-descriptions :column="2">
          <el-descriptions-item label="头像">
            <el-avatar :src="currentManager.avatar"></el-avatar>
          </el-descriptions-item>
          <el-descriptions-item label="账号">{{ currentManager.account }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{ currentManager.userName }}</el-descriptions-item>
          <el-descriptions-item label="爱好">{{ currentManager.hobby }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ currentManager.email }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ currentManager.phone }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ currentManager.sex }}</el-descriptions-item>
          <el-descriptions-item label="生日">{{ currentManager.birthday }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>

      <el-dialog title="新增管理员" :visible.sync="dialogFormVisible" style="width: 60%; margin-left: 20%">
        <el-form v-model="temp">
          <el-form-item label="昵称" :label-width="formLabelWidth">
            <el-input v-model="temp.userName"></el-input>
          </el-form-item>
          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input v-model="temp.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="temp.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="temp.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="temp.email"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-input v-model="temp.birthday"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio v-model="temp.sex" label="男">男</el-radio>
            <el-radio v-model="temp.sex" label="女">女</el-radio>
            <el-radio v-model="temp.sex" label="未知">未知</el-radio>
          </el-form-item>
          <el-form-item label="爱好" :label-width="formLabelWidth">
            <el-select v-model="temp.hobby" placeholder="请选择爱好">
              <el-option v-for="item in options" :key="item.value" :label="item.text"
                         :value="item.text"/>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'manager',
  data() {
    return {
      au: false,
      options: [],
      managerList: [],
      show: false,
      currentManager: {},
      temp: {},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      token: {
        token: JSON.parse(localStorage.getItem('loginMes')).token
      }
    }
  },
  created() {
    this.getManagerList();
    this.getDict();
  },
  methods: {
    add() {
      this.dialogFormVisible = true;
    },
    save() {
      this.dialogFormVisible = false;
      this.$axios.post("/sys-user/save", {
        account: this.temp.account,
        password: this.temp.password,
        userName: this.temp.userName,
        hobby: this.temp.hobby,
        email: this.temp.email,
        phone: this.temp.phone,
        sex: this.temp.sex,
        birthday: this.temp.birthday
      }).then(res => {
        if (res.data.code === '200') {
          this.$message.success(res.data.data);
        } else {
          this.$message.error(res.data.message);
        }
      })
      this.temp = {};
    },
    getManager(manager) {
      this.show = true;
      this.currentManager = manager;
    },
    getManagerList() {
      this.$axios.post("/sys-user/page", {}).then(res => {
        if (res.data.code === '200') {
          this.managerList = res.data.data;
        } else {
          this.au = true;
        }
      });
    },
    getDict() {
      this.$axios.post('/dict-message/listByType', {
        type: 'hobby'
      }).then(res => {
        if (res.data.code === '200') {
          this.options = res.data.data;
        } else {
          this.$message.error(res.data.message)
        }
      });
    },
    deleteManager(param) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/sys-user/delete/manager", {
          "id": param.id
        }).then(rel => {
          if (rel.data.code === "200") {
            this.$message({
              message: "删除管理员成功",
              type: 'success'
            });
            this.getManagerList();
          } else {
            this.$message.error("删除管理员失败");
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid #d9d9d9;
}

.btn {
  margin-top: 20px;
  margin-left: 20px;
}

.el-input {
  margin-right: 20px;
  width: 90%;
}
</style>
